/**
 * The styles in this file are only structural for toolbar,
 * all the design should be added to the default theme css.
 */
body {
  overflow: hidden;
  cursor: default;
  background: transparent;
  width: 100vw;
  height: 100vh;
}

#root {
  position: absolute;
  width: 100vw;
  top: 0;
  transition: top 0.2s ease-in-out;

  &:has(.ft-bar-delayed) {
    transition-delay: var(--config-time-before-hide);
    &:hover {
      transition-delay: var(--config-time-before-show);
    }
  }

  &:has(.ft-bar-hidden):not(:hover) {
    top: calc(var(--config-height) * -1 + 1px);
    border-bottom: 1px solid transparent;
  }
}

.fancy-toolbar {
  .ft-bar {
    position: relative;
    width: 100%;
    height: var(--config-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--config-padding-at-side);

    .ft-bar-left,
    .ft-bar-center,
    .ft-bar-right {
      display: flex;
      align-items: stretch;
      height: min-content;
      gap: 6px;
    }

    .ft-bar-left {
      max-width: 50%;
      width: 50%;
      overflow: hidden;
      justify-content: flex-start;
    }

    .ft-bar-center {
      justify-content: center;
      padding: 0 6px;
    }

    .ft-bar-right {
      max-width: 50%;
      width: 50%;
      overflow: hidden;
      justify-content: flex-end;
    }
  }
}

.ft-bar-item-tooltip {
  top: calc(var(--config-height) + 4px) !important; /* Override inline style */
}

.ft-bar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;

  .ft-bar-item-content {
    display: flex;
    align-items: center;
    width: 100%;

    > span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: pre;
    }

    &.workspaces {
      gap: 12px;
      margin: 0 4px;

      .workspace-dot {
        width: 6px;
        height: 6px;
        border-radius: 3px;

        &.workspace-dot-active {
          width: 18px;
        }
      }
    }
  }
}

.tray {
  position: relative;
  width: 250px;

  .tray-list {
    position: relative;
    z-index: 1;

    .tray-item-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.wlan-selector {
  position: relative;
  width: 300px;

  .wlan-selector-entries {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .wlan-selector-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .wlan-entry {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .wlan-entry-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;

        .wlan-entry-info-ssid {
          flex: 1;
        }
      }

      .wlan-entry-fields {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .wlan-entry-actions {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .wlan-selector-footer {
    position: relative;
    z-index: 1;
  }
}

.fast-settings {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 300px;

  .fast-settings-title {
    z-index: 1;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .fast-settings-item-title-button {
      position: absolute;
      top: 0;
      right: 0;
      padding: 6px;
      border-radius: 6px;

      &:hover {
        backdrop-filter: brightness(0.8);
      }
    }
  }

  .fast-settings-item {
    z-index: 1;
    display: flex;
    gap: 6px;
    align-items: center;

    .ant-slider {
      flex: 1;
    }
  }

  .fast-settings-power {
    display: flex;
    gap: 6px;

    > .fast-settings-item-button {
      flex: 1;
    }
  }

  .fast-settings-item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
  }
}
